<template>
  <j-modal
    switchFullscreen
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ props: {disabled: disableSubmit} }"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk" v-if="!disableSubmit">确认</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-divider orientation="left">基础信息</a-divider>
          <a-col :xl="18" :lg="18" :md="18" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="经销商组名称">
              <a-input :disabled="disableSubmit" placeholder="经销商组名称" type="text"
                       v-decorator="['customerGroupName', validatorRules.input]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="18" :lg="18" :md="18" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="备注">
              <a-textarea placeholder="请输入备注" :disabled="disableSubmit" v-decorator="['remarks', {}]"/>
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </a-spin>
    <!-- 活动明细 -->
    <a-divider orientation="left">添加经销商</a-divider>
    <j-select-cust
      :inputs="false"
      :disabled="disableSubmit"
      :multiple="true"
      :queryParams="{permflag: 'customer_group_page_impl_add_cust'}"
      @select="handleSelectTerm">
    </j-select-cust>
    <div style="margin-bottom: 10px"></div>
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      class="Table j-table-force-nowrap"
      @change="handleTableChange">
      <span slot="action" slot-scope="text, record,index">
              <a-popconfirm :disabled="disableSubmit" title="确定删除吗?" @confirm="() => handleDelete(index)">
                      <a>删除</a>
              </a-popconfirm>
            </span>
    </a-table>
  </j-modal>
</template>

<script>

import JTreeSelect from '@/components/cn-form/JTreeSelect'
import { httpAction, postAction, getAction } from '@/api/manage'
import moment from 'moment'
import CnMultiSelectTag from '@/components/dict/CnMultiSelectTag'
import { PageListMixin } from '@/mixins/PageListMixin'
import JSelectCust from '@comp/cn-select-popup/CnSelectCust'
import { pick } from 'lodash'

export default {
  name: 'TpmActSpecialModal',
  components: {
    JTreeSelect,
    CnMultiSelectTag,
    JSelectCust
  },
  mixins: [PageListMixin],
  data() {
    return {
      title: '操作',
      visible: false,
      disableSubmit: false,
      model: {},
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '经销商编号',
          align: 'center',
          dataIndex: 'customerCode'
        },
        {
          title: '经销商名称',
          align: 'center',
          dataIndex: 'customerName'
        },
        {
          title: '合作方式',
          align: 'center',
          dataIndex: 'limitNum'
          // scopedSlots: { customRender: 'limitNum' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      dataSource: [],
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        input: { rules: [{ required: true, message: '' }] },
        select: { rules: [{ required: true, message: '' }] }
      },
      url: {
        add: window._CONFIG['domianURL'] + '/customergroup/cnCustomerGroup/saveOrUpdate',
        edit: window._CONFIG['domianURL'] + '/customergroup/cnCustomerGroup/saveOrUpdate',
        queryById: '/customergroup/cnCustomerGroup/getInfo',

      }
    }
  },
  created() {
  },
  methods: {
    moment,
    handleSelectProduct(e) {
      this.form.setFieldsValue({ 'productName': e[0].productName })
    },
    handleSelectCode() {
      this.$refs.CodeConfigModal.showModal(4)
    },
    add() {
      this.edit()
    },
    edit(isEdit) {
      let that = this
      let record = {}
      this.visible = true
      this.form.resetFields()
      if (isEdit) {
        getAction(this.url.queryById, { id: isEdit.id }).then((res) => {
          if (res.success) {
            record = res.result

            this.dataSource = []
            this.model = Object.assign({}, record)
            if (this.model.id) {
              this.dataSource = this.model.customers || []
            }

            let fieldsVal = pick(this.model, 'customerGroupName', 'remarks')

            this.$nextTick(() => {
              this.form.setFieldsValue(fieldsVal)
              //时间格式化
            })
          }
        })

      }

    },
    close() {
      this.$emit('close')
      this.dataSource = []
      this.model={}
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          let httpurl = ''
          let method = ''
          httpurl += this.url.add
          method = 'post'
          let formData = Object.assign(this.model, values)
          //时间格式化
          let tmpdate = formData.actStart
          formData.customers = this.dataSource
          // formData.orgCode = '1000'
          that.confirmLoading = true
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        }
      })
    },
    handleCancel() {
      this.close()
      this.showterm = false
    },
    changeTerm(val) {
      if (val != undefined) {
        if (val === '' || val === '0') {
          this.showterm = false
          this.showorg = true
        } else {
          this.showterm = true
          this.showorg = false
        }
      }
    },
    handleSelectTerm(list) {
      this.dataSource = list
    },
    handleDelete(index) {
      this.dataSource.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal-body {
  padding-top: 0 !important;
}

.ant-calendar-picker, .ant-input-number {
  width: 100% !important;
}
</style>